<template>
  <div>
    <!--        {{subject_id}}{{subject_name}}-->
    <div v-if="recentVideoList && recentVideoList.rows && recentVideoList.rows.length">
      <div style="display: flex;border-bottom: 1px solid gray;padding: 10px 0px" v-for="item in recentVideoList.rows">
        <img style="width: 160px;height: 97px;!important;" :src="item.bannerPic" alt="">
        <div style="display: flex;justify-content:space-between;width: 100%;margin-left: 10px">
          <div style="display: flex;flex-direction: column;justify-content: space-between">
            <p style="font-weight: bold;font-size: 16px;">名称：{{ item.title }}</p>
            <p style="font-size: 12px;color: rgb(141, 130, 130)">讲师：{{item.admin.name}}</p>
            <p style="font-size: 12px;color: rgb(141, 130, 130)">预约人数：{{item.basicReserveNum}}</p>
            <p style="font-size: 14px">发布时间：{{ proxy.$filters.dateTimeFormat2(item.broadcastDate) }}</p>
          </div>
          <div style="display: flex;flex-direction: column;justify-content: flex-end">
            <el-button style="text-align: right" @click="continueStudy(item)">立即预约</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无预约" />
    <div v-if="recentVideoList.pagination">
      <el-pagination
          background
          v-model:currentPage="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="recentVideoList.pagination.count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {reactive, toRefs, getCurrentInstance,toRaw} from 'vue'
import {useRouter} from "vue-router";
import {liveReserve, liveReserveReserve} from "@/api/api";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "myPreview",
  props: {
    state: {
      type: String
    }
  },
  setup(props) {

    const {proxy} = getCurrentInstance()
    let router = useRouter();

    let data = reactive({
      recentVideoList: [],
      pageSize: 10,
      currentPage: 1,
    })

    let getRecentVideoList = () => {
      liveReserve({
        state: props.state,
        courseID: localStorage.getItem('activeCourse'),
        page: data.currentPage,
        pageSize: data.pageSize
      }).then(res => {
        console.log('最近在学视频列表', res)
        data.recentVideoList = res.data;
      })
    }
    getRecentVideoList()

    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
      data.pageSize = val;
      getRecentVideoList();
    }
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`)
      data.currentPage = val;
      getRecentVideoList();
    }

    let continueStudy = (item) => {
      ElMessageBox.confirm(
          `<div>
               <div style="position: relative;width: 100%;height: 220px;border-top-left-radius: 10px;border-top-right-radius: 10px;overflow: hidden">
                    <img style="position: absolute;top: 0;transform: translate(0,-50%);" width="100%" src="${toRaw(item).bannerPic}"/>
                </div>
                <div>
                   <div>
                        <p style="font-size: 16px;font-weight: bold;margin: 10px 0px">${toRaw(item).title}</p>
                        <div style="display: flex;align-items: center">
                          <div style="padding: 2px 10px;background: #00a5ff;color: white;margin-right: 14px;border-radius: 4px">直播</div>
                          <div>讲师：${toRaw(item).admin.name}</div>
                        </div>
                   </div>
                   <div style="display: block;height: 1px;width: 100%;margin: 14px 0;background: #dcdfe6"></div>
                   <div style="margin-bottom: 20px">
                        <div style="display: flex;">
                          <div style="padding: 2px 10px;background: #00a5ff;color: white;margin-right: 14px;border-radius: 4px;height: 24px">直播时间</div>
                          <div>${proxy.$filters.dateTimeFormat(toRaw(item).broadcastDate).substring(0,10)}</div>
                        </div>
                   </div>
<!--                   <div style="margin-bottom: 20px">-->
<!--                        <div style="display: flex;">-->
<!--                          <div style="padding: 2px 10px;background: #00a5ff;color: white;margin-right: 14px;border-radius: 4px;width: 120px;height: 24px">讲师介绍</div>-->
<!--                          <div>-->
<!--                          -->
<!--                          </div>-->
<!--                   </div>-->
                </div>
             </div>`,
          '直播详情',
          {
            dangerouslyUseHTMLString: true,
            confirmButtonText: '立即预约/取消预约',
            cancelButtonText: '取消',
            showClose: false,
            customClass: 'msgbox'
          }
      )
          .then(() => {
            liveReserveReserve({liveStreamingID:item.id}).then(res =>{
              ElMessage({
                type: 'success',
                message: res.data.message == '添加成功' ? '预约成功':'取消预约',
              })
            })
            getRecentVideoList();
          })
          .catch(() => {

          })
    }
    return {
      proxy,
      handleSizeChange,
      handleCurrentChange,
      ...toRefs(data),
      continueStudy
    }
  }
}
</script>

<style scoped>

</style>
